<template>
    <div>
        <SuperTable ref="table" path="/project/tour/index" :params="params" :columns="columns">
            <Button slot="header-left" type="primary" @click="showModal = true">新增巡演</Button>
        </SuperTable>
        <Modal :title="form.id ? '编辑巡演' : '新增巡演'" v-model="showModal" :width="420" @on-cancel="handleCancel">
            <Form ref="form" :model="form" :rules="rules" :label-width="80">
                <FormItem label="艺人" prop="singer_id">
                    <Select v-model="form.singer_id" clearable filterable style="width: 260px;">
                        <Option v-for="item in singerLists" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="名称" prop="name">
                    <Input v-model="form.name" style="width: 260px;" />
                </FormItem>
                <FormItem label="描述" prop="desc">
                    <Input v-model="form.desc" :rows="5" type="textarea" maxlength="255" show-word-limit placeholder="请填写描述"  />
                </FormItem>
                <FormItem label="图片" prop="img">
                    <ImageUpload v-model="form.img"></ImageUpload>
                </FormItem>
                <FormItem label="是否热门" prop="is_hot">
                    <RadioGroup v-model="form.is_hot">
                        <Radio :label="0">否</Radio>
                        <Radio :label="1">是</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :disabled="submiting" @click="handleCancel">取消</Button>
                <Button type="primary" :loading="submiting" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import TableRows from '@/components/utils/table-rows.vue';
import ImageUpload from '@/components/form/image-upload.vue';

export default {
    components: {
        SuperTable,
        TableRows,
        ImageUpload
    },
    data() {
        return {
            singerLists: [],
            submiting: false,
            showModal: false,
            form: {
                id: '',
                singer_id: 0,
                name: '',
                desc: '',
                img: '',
                is_hot: 0,
            },
            rules: {
                singer_id: [
                    {required: true, type: 'number', message: '请选择艺人', trigger: 'change'}
                ],
                name: [
                    {required: true, message: '请输入名称', trigger: 'blur'}
                ],
                desc: [
                    {required: true, message: '请填写描述', trigger: 'blur'}
                ],
                img: [
                    {required: true, message: '请上传图片', trigger: 'change'}
                ],
                is_hot: [
                    {required: true, type: 'number', message: '请选择是否热门', trigger: 'change'}
                ]
                
            },
            params: {
                page: 1,
                pageSize: 10
            },
            columns: [
                {
                    title: '艺人',
                    render: (h, params) => {
                        let name = '';
                        this.singerLists.map(item => {
                            if (item.id == params.row.singer_id){
                                name = item.name
                            }
                        })
                        return h('span', name);
                    }
                },
                {
                    title: '名称',
                    key: 'name'
                },
                {
                    title: '图片',
                    render: (h, params) => {
                        return h(TableRows, {
                            props: {
                                src: params.row.img || '/static/images/default_avatar.png'
                            }
                        })
                    }
                },
                {
                    title: '描述',
                    render: (h, params) => {
                        let content = params.row.desc
                        content = content.length <= 50 ? content : content.substring(0, 50) + '...';
                        let Ptext = [
                            h('span',content)
                        ];
                        if (content.length > 50){
                            Ptext.push(
                                h("Poptip", {
                                    props:{
                                        transfer: true,
                                        width: '400',
                                        placement: 'right',
                                        trigger: 'hover',
                                        content: params.row.desc,
                                        wordWrap: true
                                    }
                                }, [
                                    h("a",'更多')
                                ])
                            )
                        }
                        return h('p', Ptext);
                    }
                },
                {
                    title: '是否热门',
                    render: (h, params) => {
                        return h('span', params.row.is_hot == 1 ? '是' : '否');
                    }
                },
                {
                    title: '创建时间',
                    key: 'created_at'
                },
                {
                    title: '更新时间',
                    key: 'updated_at'
                },
                {
                    title: "操作",
                    align: "center",
                    key: "action",
                    width: 120,
                    render: (h, params) => {
                        return h("div", [
                            h("Button", {
                                props: {
                                    type: "success",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        this.form.id = params.row.id;
                                        this.form.singer_id = params.row.singer_id;
                                        this.form.name = params.row.name;
                                        this.form.desc = params.row.desc;
                                        this.form.img = params.row.img;
                                        this.form.is_hot = params.row.is_hot;
                                        this.showModal = true;
                                    }
                                }
                            }, "编辑"),
                            h("Button", {
                                style: {
                                    marginLeft: "5px"
                                },
                                props: {
                                    type: "error",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        this.handleDelete(params.row);
                                    }
                                }
                            }, "删除")
                        ])
                    }
                }
            ]
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.$ajax.get('/project/singer/index', {
                params: {
                    pageSize: 1000
                }
            }).then(res => {
                this.singerLists = res.items
            }).catch(err => {})
        },
        handleCancel() {
            this.showModal = false;
            setTimeout(() => {
                this.form.id = '';
                this.form.singer_id = 0;
                this.form.name = '';
                this.form.desc = '';
                this.form.img = '';
                this.form.is_hot = null;
            }, 300)
        },
        handleSubmit() {
            if(this.submiting) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    const { form } = this;
                    let params = {
                        singer_id: form.singer_id,
                        name: form.name,
                        desc: form.desc,
                        img: form.img,
                        is_hot: form.is_hot,
                    }
                    this.submiting = true;
                    if (form.id) {
                        this.$ajax.put('/project/tour/update/'+form.id, params).then(res => {
                            this.$Message.success('编辑成功');
                            this.submiting = false;
                            this.handleCancel();
                            this.$refs.table.reload();
                        }).catch(err => {
                            this.submiting = false;
                            this.$Message.error(err.message || '提交失败');
                        })
                    }else{
                        this.$ajax.post('/project/tour/save', params).then(res => {
                            this.$Message.success('添加成功');
                            this.submiting = false;
                            this.handleCancel();
                            this.$refs.table.init();
                        }).catch(err => {
                            this.submiting = false;
                            this.$Message.error(err.message || '提交失败');
                        })
                    }
                }
            })
        },
        handleDelete(row) {
            this.$Modal.confirm({
                title: "操作提示:",
                width: 320,
                content: `<p>您确定要删除巡演‘${row.name}’吗?</p>`,
                onOk: () => {
                    const msg = this.$Message.loading({
                        content: '正在提交删除',
                        duration: 0
                    });
                    this.$ajax.delete('/project/tour/delete', {params: {id:row.id}}).then(() => {
                        msg();
                        this.$Message.success('操作成功');
                        this.$refs.table.reload();
                    }).catch(err => {
                        msg();
                        this.$Message.error(err.message || '操作失败');
                    })
                }
            });
        },
    }
}
</script>